.ranking {
  padding: 0 10px;
  display: inline-block;
  vertical-align: middle;
  width: 335px;
  height: 548px;
  background: linear-gradient(
    9deg,
    rgba(196, 154, 107, 1) 0%,
    rgba(243, 214, 149, 1) 100%
  );
  border-radius: 9px;
  transition: 0.2s ease-in-out;
  margin-top: 25px;
  margin-bottom: 40px;
  margin-right: 26px;
}
.ranking:hover {
  height: 613px;
  background: linear-gradient(
    9deg,
    rgba(248, 62, 37, 1) 0%,
    rgba(242, 213, 148, 1) 100%
  );
  border-radius: 9px;
  margin-top: 0;
  margin-bottom: 0px;
}
.ranking-title {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(128, 72, 8, 1);
  position: relative;
  top: 25px;
  text-align: center;
  transition: 0.2s ease-in-out;
}
.ranking-item-container {
  padding: 14px 13px 0;
  width: 308px;
  height: 456px;
  background: linear-gradient(
    0deg,
    rgba(255, 251, 245, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 9px;
  position: relative;
  left: 0;
  right: 0;
  top: 40px;
  margin: 0 auto;
  transition: 0.2s ease-in-out;
}

.ranking-button {
  position: absolute;
  bottom: 1px;
  width: 175px;
  height: 56px;
  left: 96px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  background: url('../image/picture/ranking_button.png');
  transition: 0.2s ease-in-out;
  text-align: left;
  line-height: 40px;
  cursor: pointer;
}
.ranking-button span {
  margin-left: 30px;
}
.ranking-item {
  width: 308px;
  height: 39px;
  line-height: 39px;
}
.ranking-item-main {
  height: 39px;
}
.ranking-item-hover {
  display: none;
  transition: 0.2s ease-in-out;
}
/* .ranking-item-hover {
  width: 290px;
  height: 74px;
  padding: 12px 9px 16px;
} */
.ranking-item-rank-img {
  vertical-align: super;
  margin-left: 5px;
}
.ranking-item-rank {
  width: 19px;
  height: 19px;
  background: rgba(219, 164, 72, 1);
  display: inline-block;
  vertical-align: super;
  position: relative;
  bottom: 8px;
  left: 8px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 19px;
  text-align: center;
  margin-right: 10px;
}
.ranking-item-title {
  width: 258px;
  position: relative;
  top: 2px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(128, 72, 8, 1);
  display: inline-block;
  padding-left: 6px;
}
.ranking-item-title-hover {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(128, 72, 8, 1);
  max-height: 40px;
  overflow: hidden;
}
.ranking-item-img {
  width: 102px;
  height: 74px;
  display: inline-block;
}
.ranking-item-right {
  width: 182px;
  display: inline-block;
  vertical-align: top;
}

.ranking-tag {
  min-width: 54px;
  height: 21px;
  background: rgba(253, 229, 225, 1);
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(247, 68, 42, 1);
  line-height: 21px;
  padding-left: 10px;
  padding-right: 10px;
}
.ranking-tag img {
  position: relative;
  top: 1px;
  margin-right: 1px;
}